<template>
  <van-nav-bar
      title="订单列表"
      left-arrow
      @click-left="onClickLeft"
  />
  <div class="order">
    <van-tabs v-model:active="active" @click-tab="onClickTab" color="#ff9854" title-active-color="#ff9854">
      <van-tab title="全部订单" name="all"></van-tab>
      <van-tab title="近期订单" name="recent"></van-tab>
      <van-tab title="待支付" name="pend"></van-tab>
    </van-tabs>
    <div class="main">
      <div class="order_item" v-for="item in orderList" :key="item.orderId">
        <div class="item_header">
          <div class="item_title">{{ item.unitName }}</div>
          <h3 :style="{color:item.orderStatusDescColor}">{{item.orderStatusDesc}}</h3>
        </div>
        <div class="item_img">
          <img :src="item.unitPicture" alt="">
          <div class="cover">
            <div class="left">
              <div>
                <div class="moment">
                  {{ formatMonthDay(item.checkInDate) }}
                </div>
                <div class="day">
                  {{ getDay(item.checkInDate) }} {{item.checkInLatestTime}}
                </div>
              </div>
              <div class="down">
                <van-icon name="down" />
              </div>
              <div>
                <div class="moment">
                  {{ formatMonthDay(item.checkOutDate) }}
                </div>
                <div class="day">
                  {{ getDay(item.checkOutDate) }} {{item.checkOutLatestTime}}
                </div>
              </div>
            </div>
            <div class="right">
              <div class="count">支付总价</div>
              <div class="prepayAmount">¥{{ item.prepayAmount }}</div>
            </div>
          </div>
        </div>
        <div class="item_info">
          <div class="countdown">
            <van-icon name="underway-o" /><span>{{ getCountdown(item.countdown) }}分</span> 后订单自动取消
          </div>
          <div class="actions">
            <van-button type="default" size="small">联系房东</van-button>
            <van-button class="actions_btn" type="danger" :color="item.orderStatusDescColor" size="small">{{item.orderStatusDesc}}</van-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
 import {ref} from "vue"
 import { getOrderAll } from "@/services"
 import {formatMonthDay,getDay,getCountdown} from "@/utils/format_date"
 import { useRouter } from "vue-router"

 const active = ref(0);
 const onClickTab = (data) =>{
  orderType.value = data.name
  getDataList()
 }
 const router = useRouter()
 const onClickLeft = ()=>{
  router.go(-1)
 }

 let orderList = ref([])
 let orderType = ref('all')
 const getDataList = ()=>{
  getOrderAll({
    type:orderType.value
  }).then(res => {
    orderList.value = res.data.data.orders
  })
 }
 getDataList()
</script>

<style lang="less" scoped>
.order{
  height: calc(100vh - 96px);
  overflow-y: auto;
  .main {
    margin-top: 4px;
    padding-top: 5px;
    border-top:1px solid #f8f8f9;
    background-color: #f8f8f8;
    .order_item{
      background-color: #fff;
      padding:0 20px 10px 20px;
      margin-bottom: 5px;
      .item_header{
        display: flex;
        height: 50px;
        line-height: 50px;
        .item_title{
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        h3{
          color: var(--primary-color);
        }
      }
      .item_img{
        width: 335px;
        position: relative;
        img{
          width: 335px;
          border-radius: 8px;
        }
        .cover{
          position: absolute;
          display: flex;
          bottom: 0;
          padding: 10px;
          width: 315px;
          justify-content: space-between;
          color:#fff;
          background-color: rgba(0,0,0,.55);
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
          .left{
            display: flex;
            flex: 1;
            justify-content: space-around;
            align-items: center;
            .down{
              transform: rotate(270deg);
              color: var(--primary-color);
            }
            .moment{
              font-size: 18px;
            }
            .day{
              font-size: 12px;
            }
          }
          .right{
            border-left: 1px solid #fff;
            padding-left: 40px;
            padding-right: 10px;
            .count{
              font-size: 12px;
            }
            .prepayAmount{
              color:var(--primary-color);
              font-size: 18px;
            }
          }
        }
      }
      .item_info{
        display: flex;
        justify-content: space-between;
        margin-top: 8px;
        .countdown{
          line-height: 32px;
          span{
            color: var(--primary-color);
            margin-left: 3px;
          }
        }
        .actions{
          .actions_btn{
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>
